<!--分组管理-->
<template>
  <div class="minW1060-auto bg-fff mt10">
    <div class="pad20 ml10">
      <el-row>
        <el-col :span="18">
          <el-col :span="18">
            <div class="dlblock-mb20 mr10">
              <span class="pr5" style="padding-left: 30px">机构名称</span>
              <el-cascader
                      v-model="group"
                      :options="groupTree"
                      :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                      style="width: 150px;"
                      :show-all-levels="false"
                      clearable
              >
              </el-cascader>
            </div>
            <div class="dlblock-mb20 pr5 pl5">
              <el-button
                      @click="pages.page = 1,getGroupsFn()"
                      class="el-icon-search ml5"
                      circle
              ></el-button>
            </div>
          </el-col>
        </el-col>
        <el-col :span="6" align="right">
          <div class="grid-content bg-purple-light">
            <div class="dlblock-mb20 pr10 ml20">
              <el-button type="primary" @click="addGroupFn">添加</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <!--表格-->
      <el-row>
        <el-table class="my-table"
                  :data="groupList"
                  v-loading="loading"
                  :header-row-class-name="'my-table-header'"
                  @selection-change="handleSelectionChange"
                  @cell-click="cellChange"
                  ref="myTable">
          <el-table-column align="center" prop="name" label="机构名称">
          </el-table-column>
          <el-table-column align="center" prop="parentName" label="所属公司">
          </el-table-column>
          <el-table-column align="center" prop="address" label="机构地址">
          </el-table-column>
          <el-table-column align="center" prop="tel" label="机构电话">
          </el-table-column>
          <el-table-column align="center" prop="carNum" label="车辆数">
          </el-table-column>
          <el-table-column align="center" prop="deviceNum" label="设备数">
          </el-table-column>
          <el-table-column align="center" prop="personNum" label="人员数">
          </el-table-column>
          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="{row}">
              <div>
                <el-button type="text" @click="updateGroupFn(row)">编辑</el-button>
                <el-button type="text" style="color: #f56c6c" @click="delGroupFn(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <!--分页控件-->
      <el-row :gutter="20" class="mt10">
        <el-col :span="12" :offset="6" align="center">
          <el-pagination background layout="total, prev, pager, next" :total="pages.total"
                         :page-size="pages.size"
                         :current-page="pages.page" @current-change="pageChange">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog :title="`编辑机构`" :visible.sync="editCompanies" width="900px" :close-on-click-modal="false" v-dialogDrag>

      <el-row :gutter="10" style="padding: 0px 0px 0px 0px !important;">
        <el-form label-position="left" label-width="110px" :model="company"
                 ref="company" style="padding: 0px 0px 0px 0px !important;">

          <el-row>
            <el-col align="left">
              <h1 style="padding-left:40px">基本信息</h1>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="所属机构" prop="group" >
                <el-cascader
                        v-model="company.groupId"
                        :options="groupTree"
                        :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                        style="width: 190px;"
                        :show-all-levels="false"
                        clearable
                        placeholder="请选择">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="机构名称" prop="name"  >
                <el-input v-model.trim="company.name" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="机构地址" prop="address" >
                <el-input v-model.trim="company.address" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="机构电话" prop="tel" >
                <el-input v-model.trim="company.tel" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          <el-col :span="6" :offset="2">
            <el-form-item label="注册地址" prop="regAddress">
              <el-input v-model.trim="company.regAddress" placeholder="请输入内容" :maxlength="20" show-word-limit
                        clearable style="width: 190px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="4">
            <el-form-item label="注册时间：" prop="regTime">
              <el-date-picker style="width: 190px;"
                              v-model="company.regTime"
                              align="left"
                              type="date"
                              placeholder="选择日期"
                              :clearable="false"
                              value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="注册资本" prop="regCapital">
                <el-input v-model.trim="company.regCapital" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="机构代码" prop="orgCode">
                <el-input v-model.trim="company.orgCode" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="企业邮箱" prop="email">
                <el-input v-model.trim="company.email" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="传真号码" prop="fax">
                <el-input v-model.trim="company.fax" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="法人姓名" prop="legalPersonName">
                <el-input v-model.trim="company.legalPersonName" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="法人电话" prop="legalPersonTel">
                <el-input v-model.trim="company.legalPersonTel" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="经营许可证编号" prop="licenseCode">
                <el-input v-model.trim="company.licenseCode" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="纳税人识别号" prop="creditCode">
                <el-input v-model.trim="company.creditCode" placeholder="请输入内容" :maxlength="20" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="2">
              <el-form-item label="经营范围描述" prop="scopeDescribe">
                <el-input v-model.trim="company.scopeDescribe" placeholder="请输入内容" :maxlength="50" show-word-limit
                          clearable style="width: 190px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="4">
              <el-form-item label="经济类型" prop="economy" >
                <el-cascader
                        v-model="company.economy"
                        :options="economys"
                        :props="{value: 'id', label: 'name', checkStrictly: true,expandTrigger:'hover'}"
                        style="width: 190px;"
                        :show-all-levels="false"
                        clearable
                        placeholder="请选择">
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col align="center">
              <div class="dlblock-mb20 pr10 ml20">
                <el-button type="primary" @click="editGroupFn('company')">保存</el-button>
              </div>
              <div class="dlblock-mb20 ml20 pr10">
                <el-button type="danger" @click="resetForm('company')">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>


<script>
import {deleteGroup, getGroups,editGroup,getGroupTree} from '@/api';

export default {
  name: "index",
  components: {},
  data() {
    return {
      group:'',
      groupList: [],
      groupTree: [],
      groupName: "",
      loading: false,
      editCompanies:false,
      pages: {
        id:'',
        total: 0,
        size: 12,
        page: 1
      },
      groupIds: [],
      /*group: {
        name: '',
        type: '0'
      },*/
      economys:[
        {id:0,name:'未设置'},
        {id:1,name:'国有经济'},
        {id:2,name:'集体经济'},
        {id:3,name:'联营经济'},
        {id:4,name:'股份制经济'},
        {id:5,name:'外商投资经济'},
        {id:6,name:'港澳台投资经济'},
        {id:7,name:'其它经济'},
      ],
      groupId:'',
      companyId:'',
      plus: true,
      company: {
        companyId:'',
        groupId:'',
        name:'',
        address:'',
        tel:'',
        regAddress:'',
        regTime:'',
        regCapital:'',
        orgCode:'',
        creditCode:'',
        licenseCode:'',
        taxpayerCode:'',
        scopeDescribe:'',
        economy:'',
        fax:'',
        email:'',
        legalPersonName:'',
        legalPersonTel:''
      },

    }
  },
  created() {
    this.getGroupsFn()
    this.getGroupTreeFn()
  },
  methods: {
    getGroupsFn() {
      let group = this.group.length ? this.group[this.group.length - 1] : ''
      this.loading = true
      console.log(group)
      getGroups({
        groupId : group,
        pageNum: this.pages.page,
        total: this.pages.total,
        pageSize: this.pages.pageSize,
      }).then(res => {

        if (res != null && res.code == 200) {
          this.groupList = res.data.list;
          this.pages.total = res.data.count;
          console.log(this.groupList)
        } else {
          this.$message.info(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      this.groupIds = val.map(item => item.id)
      var els = document.querySelectorAll(".el-table-column--selection");
      let hasChecked = els[5].querySelector(".el-checkbox__inner").parentElement.classList.contains("is-checked")
      if (hasChecked) {
        document.querySelectorAll(".el-checkbox__inner").forEach(el => {
          this.checkRemove(el)
        })
      } else {
        document.querySelectorAll(".el-checkbox__inner").forEach(el => {
          this.checkAdd(el)
        })
      }

    },
    checkAll(e) {
      alert(e)
      let accountCheck = this.$refs.accountCheck
      if (e.target.checked) {
        for (let i = 0; i < accountCheck.length; i++) {
          accountCheck[i].checked = true
          this.checkVal.push(accountCheck[i].value)
        }
      } else {
        for (let i = 0; i < accountCheck.length; i++) {
          accountCheck[i].checked = false
          this.checkVal = []
        }
      }
    },
    cellChange(row, column, cell, event) {
      let classList = event.target.classList
      let el = event.target.querySelector(".plus")
      if (classList.contains("plus") || el != null) {
        this.plus = false
        if (row.plus) {
          row.plus = !row.plus
          row.flag = true
          /*获取子分组信息*/
          this.pages.id = row.id
          getGroups(this.pages).then(res => {
            if (res.data && res.data.list.length > 0) {
              this.$router.push({
                path: "/group/edit2",
                query: {group: row, menuName: row.name}
              })
            }
          })
        }
      }
    },

    //删除分组
    delGroupFn(row) {
      this.$confirm('此数据删除不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup({
          groupId: row.groupId,
          companyId: row.companyId
        }).then(res => {
          if (res != null && res.code == 200) {
            this.$message.success("删除成功")
            this.getGroupsFn()
          } else {
            this.$message.info("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //获取分组
    getGroupTreeFn(){
      getGroupTree({}).then(res =>{
        if (res.code==200){
          this.groupTree =res.data.children
        }
      })
    },

    /*cancelFn(row) {
      row.flag = !row.flag
      // 重新查询
      this.pages.id = ""
      this.getGroupsFn()
    },*/
   /* addSubRole(row) {
      // to="{path:'group/edit2', query:{group:row,menuName:'编辑角色'}}"

      /!*获取子分组信息*!/
      this.param.id = row.id
      this.plus = false
      this.$router.push({
        path: "/group/edit2",
        query: {group: row, menuName: row.name}
      })
    },*/
    /*saveFn(row) {
      // 设置分组类型
      let typeName = this.getTypeName(row.type);
      row.typeName = typeName
      // 改变显示
      row.flag = !row.flag
      saveGroup(row).then(res => {
        if (res != null && res.code == 200) {
          this.$message.success("操作成功")
          this.param.id = ""
          this.getGroupsFn(this.param)
        } else {
          this.$message.info("操作失败")
        }
      })
    },*/
    /*// 分组类型下拉发生改变
    dropChange(row) {
      // 改变 row的值
    },
*/
    //编辑
    updateGroupFn(row){
      console.log(row)
      this.getGroupTreeFn()
      this.editCompanies = true
      this.company = row
    },

    //新增
    addGroupFn(){
      this.getGroupTreeFn()
      this.editCompanies = true
    },
    //新增  编辑  保存
    editGroupFn(formName){
      this.company.groupId = this.company.groupId[this.company.groupId.length - 1]
      console.log(this.company.regTime)
      console.log(this.company.groupId)
      alert(this.company.regTime)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editGroup({
            companyId:this.company.companyId,
            groupId:this.company.groupId,
            name:this.company.name,
            address:this.company.address,
            tel:this.company.tel,
            regAddress:this.company.regAddress,
            regTime:this.company.regTime,
            regCapital:this.company.regCapital,
            orgCode:this.company.orgCode,
            creditCode:this.company.creditCode,
            licenseCode:this.company.licenseCode,
            taxpayerCode:this.company.taxpayerCode,
            scopeDescribe:this.company.scopeDescribe,
            economy:this.company.economy,
            fax:this.company.fax,
            email:this.company.email,
            legalPersonName:this.company.legalPersonName,
            legalPersonTel:this.company.legalPersonTel
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功")
              this.editCompanies = false
              this.getGroupsFn();
            }
          }).catch(err => {
            this.$message.error("保存失败")
          })
        } else {
          return false;
        }
      });
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    pageChange(page) {
      this.pages.page = page;
      this.getGroupsFn();
    },

   /* indexMethod(index) {
      this.index = index + (this.param.page - 1) * 10 + 1;
      return index + (this.param.page - 1) * 10 + 1;
    },*/

 /*   checkSwitch(e) {
      if (e.parentElement.classList.contains("is-checked")) {
        e.parentElement.classList.remove("is-checked")
      } else {
        e.parentElement.classList.add("is-checked")
      }
    },
    checkAdd(e) {
      e.parentElement.classList.add("is-checked")
    },
    checkRemove(e) {
      e.parentElement.classList.remove("is-checked")
    },

    checkMethod(event, index) {
      let e = event.target
      if (e.parentElement.classList.contains("is-checked")) {
        e.parentElement.classList.remove("is-checked")
        this.groupIds.splice(index - 1, 1)

      } else {
        e.parentElement.classList.add("is-checked")
        this.groupIds[index - 1] = this.groupList[index - 1].id
      }
      let checkeds = document.querySelectorAll(".mydeal");
      let b = 0
      checkeds.forEach(item => {
        if (item.classList.contains("is-checked")) {
          b = b + 1;
        }
      })
      let els = document.querySelectorAll(".el-table-column--selection");
      if (b == this.groupList.length || b - 8 == this.groupList.length) {
        //全选
        this.checkSwitch(els[5].querySelector(".el-checkbox__inner"))
      } else if (b < this.groupList.length || b - 8 < this.groupList.length) {
        this.checkRemove(els[5].querySelector(".el-checkbox__inner"))
      }
    }*/
  }
}
</script>


<style>
.plus {
  margin-left: 5px;
}

.input-text > input {
  text-align: center;
}


i.el-icon-circle-plus-outline.plus {
  position: absolute;
  left: 50px;
  top: 20px;
}

i.el-icon-remove-outline.plus {
  position: absolute;
  left: 50px;
  top: 20px;
}

.select-text input {
  text-align: center;
}

.checkBox {
  display: inline-block;
  position: relative;
  border: 1px solid #DCDFE6 !important;
  border-radius: 2px;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  width: 14px;
  height: 14px;
  right: 10px;
  background-color: #FFF !important;
  z-index: 1;
  left: 5px;
}

.span-align-checkbox {
  vertical-align: middle;
  margin-left: 6px;
}

span.checkbox {
  position: relative;
  left: 5px;
  top: -1px;
}

/*.el-checkbox__inner::before {
    content: '';
    position: absolute;
    display: block;
    background-color: #FFF;
    height: 2px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 5px;
}*/
</style>
